<template>
	<div class="home">
		<div class="top" style="display: flex;justify-content: space-between;">
			<div class="logo">
				<img src="../../../public/img/logo1.png">
			</div>
			<div style="margin-top: 0.3rem;width: 17rem;">
				<van-search v-model="value" @search="onSearch()"  @input="cancel()"  show-action placeholder="商品名称">
					<template #action>
						<div style="color: #07C160; " @click="onSearch()">搜索</div>
					</template>
				</van-search>
				<div v-show="isShow" style="position: absolute;z-index: 1;width: 15rem;">
					<van-cell-group inset>
						<van-cell v-for="(item,i) in search" :key="i" :title="item.title" @click="onDetail(item.id)" />
					</van-cell-group>
				</div>

			</div>
		</div>

		<home-swipe :carouselItems="carouselItems">

		</home-swipe>
		<!-- 首页推荐 -->
		<home-product title="首页推荐" :productItems="recommendedItems"></home-product>
		<div style="background-color: #06cb62;width: 100%;height: 3rem;margin-top: 0.8rem;">
			<div style="text-align: center;color: #FFFFFF;padding-top: 1rem;">
				Free Delivery for you
			</div>

		</div>
		<!-- 最新上架 -->
		<home-product title="最新上架" :productItems="newArrialItems" style="margin-top: 0.8rem;"></home-product>
		<div style="background-color: #06cb62;width: 100%;height: 3rem;margin-top: 0.8rem;">
			<div style="text-align: center;color: #FFFFFF;padding-top: 1rem;">
				Free Delivery for you
			</div>

		</div>
		<!-- 了解更多 -->
		<home-to-read-more title="了解更多" :toReadMore="toReadMore" style="margin-top: 0.8rem;"></home-to-read-more>
	</div>

</template>

<script>
	// 导入封装后的首页接口
	import {
		getHomeListAPI,
		getHomeSearchAPI
	} from '@/api/home.js';

	import HomeSwipe from './components/HomeSwipe.vue';
	import HomeToReadMore from './components/HomeToReadMore.vue';
	import HomeProduct from './components/HomeProduct.vue';

	export default {
		name: 'home',
		components: {
			HomeSwipe,
			HomeToReadMore,
			HomeProduct
		},

		data() {
			return {
				carouselItems: [],
				recommendedItems: [],
				newArrialItems: [],
				toReadMore: [],
				search: [],
				value: '',
				isShow: false
			}
		},
		created() {
			getHomeListAPI().then((result) => {
				console.log(result);
				this.carouselItems = result.data.carouselItems; //轮播项
				this.recommendedItems = result.data.recommendedItems; //推荐项  
				this.newArrialItems = result.data.newArrialItems; //最新上架
				this.toReadMore = result.data.topSaleItems; //热销单品
			})
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					// name: 'productDetail',
					// params: {id }
					path: `/product/detail/${id}`
				})
			},
			onSearch() {
				this.isShow = true;

				let params = {
					title: this.value
				};
				//2.使用封装后的接口,注意：接口有参数
				getHomeSearchAPI(params).then(result => {
					this.$toast(result.msg);
					this.search = result.data;
					console.log(result)
				}).catch(() => {});
				
			},
			cancel(){
				this.search=[];
				
			},
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
		}
	}
</script>
<style lang="less" scoped>


</style>
